03. 添加远程仓库

git remote 命令

git remote 命令可以让你管理远程仓库和与之交互。 

$ git remote

试着对你尚未与任何人分享过的本地仓库运行此命令。你会得到什么结果？

_终端在运行 `git remote` 命令。未显示任何输出，因为该仓库尚未连接到远程仓库。_

终端在运行 git remote 命令。未显示任何输出，因为该仓库尚未连接到远程仓库。

如果你尚未配置远程仓库，那么此名称将不会显示任何内容。需要注意的是在你 克隆 仓库后的情况。如果你克隆了，那么你将自动获得一个远程仓库，因为它是从你所提供的 URL 上的仓库克隆来的。我们来看一个被克隆的仓库。

_终端正在运行 `git remote` 命令。它输出了单词 `origin`。_

终端正在运行 git remote 命令。它输出了单词 origin 。

我所克隆的项目是 Google 的一个名为 Lighthouse 的项目。项目克隆自 GitHub，用于提供审查、性能度量和渐进式网页应用最佳实践。

远程仓库的简写名（Shortname）

git remote 的输出只是一个单词 origin 。这挺奇怪的。这里的 "origin" 一词称为"简写名"。简写名只是远程仓库所在位置的简略表示。简写名仅局部用于 当前 仓库（如在你的 本地 仓库中）。"origin" 一词是指代主远程仓库的专用名称。你也可以将它重命名为别的东西，但通常会被命名为 "origin"。

我们为何关心引用远程仓库路径的简便性？这是因为，你很快会发现我们将在很多命令中，用到远程仓库的路径。而这时，只使用一个名称就比使用远程仓库的完整路径简单多了。

举个例子，下列哪段描述更好理解：

  • 向北行驶大约四分之一英里，然后左转，沿那条路直行约 5 英里，然后右转，直行约 300 英尺，走过蓝色邮箱后，左转至杰克街，前进 50 英尺后再次左转至欧文路，这条路弯弯曲曲，但你最终会到达芬兰巷，然后左手边第三个建筑就是

  • 外婆家

。可以看出，直接用简写名“外婆家”比写出从当前位置到那里的整个路线要简单得多。😉

如果你想查看远程仓库的完整路径，只需使用 -v 选项即可：

_终端在运行 `git remote` 命令。输出包含简写名及其所指的完整 URL。_

终端在运行 git remote 命令。输出包含简写名及其所指的完整 URL。

在这里你可以看到，当使用 origin 一词时，实际上使用的是路径 https://github.com/GoogleChrome/lighthouse.git 。这看起来可能有点奇怪：现在有 两个 远程仓库，都是 "origin" 且链接到相同的 URL。唯一的区别在结尾处：
(fetch) 部分和 (push) 部分

我们将在后面的部分详细说明 fetch 和 push 。

我们现在讲得差不多了。下面我们就来进行一些实际操作，创建一个简单的项目并将其推送到远程仓库！

创建一个简单的项目

在此课程中，我们需要一个使用示例项目以测试远程仓库的使用，向远程仓库推送更新，以及从远程仓库获取更改等操作。

如果你没有想要使用的项目，则可以跟着我操作！

SOLUTION:
  • 为你的项目创建一个名为 `my-travel-plans` 的新目录
  • 使用 `git init` 将 `my-travel-plans` 目录转换成一个 Git 仓库
  • 创建一个 `README.md` 文件
  • 创建 `index.html`
  • 创建 `app.css`

README 文件内容 

# Travel Destinations

这是一个简单的应用，用来跟踪我想去旅行的目的地。

HTML 文件内容

将以下内容添加到 index.html 文件: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Travels</title>
    <meta name="description" content="">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>

    <div class="container">
        <div class="destination-container">
            <div class="destination" id="florida">
                <h2>Florida</h2>
            </div>

            <div class="destination" id="paris">
                <h2>Paris</h2>
            </div>
        </div>
    </div>

</body>
</html>

CSS 文件内容

将以下信息添加到 CSS 文件： 

html {
    box-sizing: border-box;
    height: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    display: flex;
    margin: 0;
    height: 100%;
}

.container {
    margin: auto;
    padding: 1em;
    width: 80%;
}

.destination-container {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.destination {
    background: #03a9f4;
    box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.4);
    color: white;
    margin: 0.5em;
    min-height: 200px;
    flex: 0 1 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h2 {
    margin: 0;
    transform: rotate(-45deg);
    text-shadow: 0 0 5px #01579b;
}

#florida {
    background-color: #03a9f4;
}

#paris {
    background-color: #d32f2f;
}

目前，我的项目看起来是这样的，但记住你可以按照自己的意愿创建项目，只需要确保项目中有一些 commit 即可。

_Chrome 浏览器中打开了显示我想去旅行的目的地（弗罗里达和巴黎）的简单网页应用。_

Chrome 浏览器中打开了显示我想去旅行的目的地（弗罗里达和巴黎）的简单网页应用。

让我们先确保你已经完成设置并准备继续。请勾掉下面这些中已完成的项：

SOLUTION:
  • 我为我的项目创建了一个名为 `my-travel-plans` 的新目录
  • 我将项目转变成了 Git 仓库
  • 我至少将一个文件添加到了项目
  • 我使用 git commit 提交了文件（例如 `Initial commit`)

在 GitHub 上托管

托管 Git 项目的方式有多种。但最受欢迎的托管网站被称为 GitHub ，你可能以前听说过。现在 GitHub 的问题是，这个名字与 Git 非常相似，有时候人们会将 Git 和 GitHub 混淆，认为它们是完全一样的，而事实上它们大相径庭。

  • Git 是一个版本控制工具
  • GitHub 是一个托管 Git 项目的服务

如果你已熟悉 GitHub，知道如何在 不 初始化 README 的情况下创建一个仓库，你可以跳过此视频，并使用与示例项目相同的名称创建仓库，记住不要初始化 readme 文件。

如果你还没有帐户，请在 GitHub 的加入页面 注册一个帐户。可以注册的 GitHub 帐户类型有很多，但我们在此课程中需要的是免费的类型。反正大多数人使用的都是免费帐户。创建好帐户后，登录 GitHub，你将位于主页：

_这是我登录后在我的帐户显示的页面。根据你拥有的仓库的数量以及你关注的其他用户和仓库，你的信息将会有所不同。_

这是我登录后在我的帐户显示的页面。根据你拥有的仓库的数量以及你关注的其他用户和仓库，你的信息将会有所不同。

与其他网站一样，GitHub 经常更新其界面，所以如果你看到的内容与上面显示的不同，不用担心，其中的重要功能还是一样的。

现在我们要学习的重点是如何创建新的仓库。实际上，从主页创建仓库的方式有两种：

  1. 从导航栏创建
  • 页面右侧最下面的绿色"New repository"（新建仓库）按钮

_GitHub 有两个可以创建新仓库的位置。位于页面标题中的加号图标和页面中间的"New repository"按钮。_

GitHub 有两个可以创建新仓库的位置。位于页面标题中的加号图标和页面中间的"New repository"按钮。

我使用的是导航栏中的按钮，因为导航栏在每个页面上都可用，它使我们可以轻松创建新仓库链接。

_点击 GitHub 标题中的加号图标会显示一个选项下拉列表，其中一个选项是"New repository"链接。_

点击 GitHub 标题中的加号图标会显示一个选项下拉列表，其中一个选项是"New repository"链接。

下拉列表中的 New repository 链接会将你转至仓库创建页面。我们只需填写此表中的一个字段 - Repository name（仓库名称）字段。

_GitHub 的创建新仓库页面。唯一必填的字段为 `Repository name` 字段。_

GitHub 的创建新仓库页面。唯一必填的字段为 Repository name 字段。

通常情况下，你可以使用项目名称作为仓库的名称。创建、修改或删除仓库都非常容易，所以不必执着于在此页上赋予它一个完美的名称。我将创建一个名为 "my-travel-plans" 的仓库，与我创建的示例项目名称一样。

你可以暂时将描述留白（如果你想，也可以添加描述）。由于我现在使用的是免费计划，我的仓库必须是 public（公开的，这意味着任何人都可以免费查看我的仓库和所有代码）。如果我想让它成为一个私有仓库，则要选择"Private"（私有），这时 GitHub 会向我索要信用卡信息，并将我升级至付费计划。

我还要 取消勾选 "Initialize this repository with the README"（使用 README 初始化此仓库）选项，因为我不希望 GitHub 为我添加一个 README 文件。

⚠️ 不使用 README 初始化 ⚠️

确保你 未勾选 "Initialize this repository with the README"选项。我们将提供自己的 README，所以不需要 GitHub 自动提供。

另外，如果我们让 GitHub 自动为我们生成新的 README 文件，它将不会给我们提供要在终端运行的相关配置命令。我们仍然有办法获得该信息，但它会被默认隐藏。

所以只需确保未勾选该字段，就没问题了！

现在，点击那个显眼的"Create repository"（创建仓库）按钮，以创建你的远程仓库！

L1 - GitHub 上的新建仓库命令

记住 git remote 命令用于创建和管理远程仓库。所以我将使用一个命令，在我的本地仓库与 GitHub 帐户上刚创建的远程仓库之间创建连接。 

$ git remote add origin https://github.com/richardkalehoff/RichardsFantasticProject.git

⚠️ 远程仓库与权限 ⚠️

警告：你需要使用 你 刚在 自己的 GitHub 帐户中创建的新仓库的 URL。请 不要 使用上面的那个，因此它是我在 自己的 账户上创建的项目。并且由于此项目在 我的 帐户上，会导致 你 无法访问并推送更改。

所以确保使用你的项目中的 URL。

Kagure、Jack、Owen 和 Finn 这些朋友们都有自己的 my-travel-plans 项目，它们位于：

下面的命令中克隆了谁的仓库？ 

$ git clone https://github.com/owen/my-travel-plans.git
SOLUTION: Owen 的

Jonathan 和 Allison 在一起开展项目。Jonathan 在 GitHub 上创建了一个项目，URL 为 https://github.com/docsrus/brain-mapping.git 。

如果 Allison 运行 git clone https://github.com/docsrus/brain-mapping.git ，她有权限对 Jonathan 在 GitHub 上的项目做出更改吗？

SOLUTION: 否

对于你刚在命令行中运行的命令，有几点需要注意：

  1. 首先，这条命令包含一个子命令 add

  • 这里使用了 origin 一词，设置了我们之前所说的简写名

    • 记住， origin 一词并没什么特殊性。
    • 如果你想将它改为 repo-on-GitHub ，那么只需（在运行命令之前）将 "origin" 改为 "repo-on-GitHub"：

    $ git remote add repo-on-GitHub https://github.com/richardkalehoff/RichardsFantasticProject.git

  • 第三，添加了仓库的完整路径（即 Web 上的远程仓库 URL）

现在，我要使用 git remote -v 来验证我已经正确添加了远程仓库：

_`git remote add` 用于创建一个 `origin` 简写名，指向 GitHub 上的项目。运行 `git remote -v` 会显示简写名和 URL。_

git remote add 用于创建一个 origin 简写名，指向 GitHub 上的项目。运行 git remote -v 会显示简写名和 URL。

棒极了！一切都很不错。我使用 git remote add 命令添加了一个远程仓库的链接，然后我用 git remote -v 检验是否一切正常。

为了确保我们的步调一致，请确认你完成了以下所有操作：

SOLUTION:
  • 我在 GitHub 上创建了我的远程仓库
  • 我使用 `git remote add` 在我的本地仓库与远程仓库之间建立了连接
  • 我使用 `git remote -v` 验证了简写名是否对应正确的 URL

小结

远程仓库与你使用的本地仓库一样，只是存储在不同的位置。要管理远程仓库，可使用 git remote 命令： 

$ git remote
  • 你可以连接到多个不同的远程仓库。
  • 简写名是用于指代远程仓库位置的名称。通常该位置为 URL，但也可能是同一台计算机上的文件路径。
  • git remote add 用于添加到新的远程仓库的连接。
  • git remote -v 用于查看远程仓库与连接之间的详细信息。

进一步研究

Next Concept